<template>
  <div class="card-wrapper" :style="{backgroundColor: bgColor, borderColor: borderColor}">
    <!--<img :src="url" alt="">-->
    <div class="img" :style="{backgroundImage: 'url(' + url + ')', backgroundSize: bgSize}"></div>
    <h5>{{title}}</h5>
  </div>
</template>

<script>
  export default {
    name: "ScenceCard",
    props: {
      title: String,
      url: String,
      bgColor: String,
      bgSize: {
        type: String,
        default: '70%'
      },
      borderColor: String
    }
  };
</script>

<style lang="less">
  .card-wrapper {
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 180px;
    height: 200px;
    border-radius: 10px;
    margin: 20px 10px;

    .img {
      width: 100%;
      height: 130px;
      background-position: center;
      background-repeat: no-repeat;
    }
    h5 {
      margin-top: 14px;
    }
  }

  @media screen and (max-width: 768px) {
    .card-wrapper {
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 180px;
      height: 120px;
      border-radius: 10px;
      margin: 20px 10px;

      .img {
        width: 100%;
        height: 80px;
        background-position: center;
        background-repeat: no-repeat;
      }
      h5 {
        margin-top: unset;
      }
    }
  }
</style>
